<template>
    <div class="cy-shuoming">
      <div class="banner ">
        <div class="banner-box">
          <p>采样前请您仔细阅读采样说明</p>
        </div>
      </div>
      <dl>
        <dt class="flex-box part-1">
          <h3>1.采样前准备</h3>
          <h4>1</h4>
        </dt>
        <dd>
          <div class="step">
            <div class="step-state"><span>1</span></div>
            <p>两套采样拭子均需进行样本采集。</p>
          </div>
          <div class="step">
            <div class="step-state"><span>2</span></div>
            <p>采集前三十分钟，使用清水漱口。请勿进食、饮水、喂奶。</p>
          </div>
          <div class="step-img">
            <img src="../assets/img/sm-step1.png" alt="">
          </div>
        </dd>
        <dt class="flex-box">
          <h3>2.采集样本<br><span>&nbsp;&nbsp;&nbsp;注意：采样过程中手不能触碰海绵</span></h3>
          <h4>2</h4>
        </dt>
        <dd>
          <div class="step-img">
            <img src="../assets/img/sm-step2.png" alt="">
          </div>
          <div class="step">
            <div class="step-state"><span>1</span></div>
            <p><span>打开包装，取出采集器</span>。<br>握住手柄，将拭子海绵部分伸进口腔内壁。在口腔内壁上下来回摩擦，
            同时旋转拭子，让海绵部分充分接触口腔粘膜，重复此动作10次，注意避免摩擦到牙齿。</p>
          </div>
          <div class="step-img">
            <img src="../assets/img/sm-step3.png" alt="">
          </div>
          <div class="step">
            <div class="step-state"><span>2</span></div>
            <p>拧开采集管上的蓝色接口（盖子），将海绵端插入采集管，拧紧盖子。</p>
          </div>
          <div class="step-img">
            <img src="../assets/img/sm-step4.png" alt="">
          </div>
          <div class="step">
            <div class="step-state"><span>3</span></div>
            <p>拧紧的采集管上下颠倒10次，确保样本与保存液混匀。</p>
          </div>
          <div class="step-img">
            <img src="../assets/img/sm-step5.png" alt="">
          </div>
          <div class="step">
            <div class="step-state"><span>4</span></div>
            <p>重复步骤 <i>1</i> <i>2</i> <i>3</i>,收集第二管样本。</p>
          </div>
          <div class="step-img">
            <img src="../assets/img/sm-step6.png" alt="">
          </div>
          <div class="step step-last">
            <div class="step-state"><span>5</span></div>
            <p>将带有“-1和-2”的条形码，分别竖贴到两个采集管壁上。</p>
          </div>
        </dd>
        <dt class="flex-box part-1">
          <h3>3.填写知情同意书</h3>
          <h4>3</h4>
        </dt>
        <dd>
          <div class="step">
            <div class="step-state"><span>1</span></div>
            <p><span>将条形码贴在《知情同意书》顶部和底部条形码栏。</span><br>阅读《知情同意书》条款，并在签名处签名，以确认同意检测。</p>
          </div>
          <div class="step-img">
            <img src="../assets/img/sm-step7.png" alt="">
          </div>
        </dd>
        <dt class="flex-box part-1">
          <h3>4.寄回样本</h3>
          <h4>4</h4>
        </dt>
        <dd>
          <div class="step">
            <div class="step-state"><span>1</span></div>
            <p>将已采集的样本采集管、已签名的《知情同意书》，一同放回采样盒。</p>
          </div>
          <div class="step-img">
            <img src="../assets/img/sm-step8.png" alt="">
          </div>
          <div class="step">
            <div class="step-state"><span>2</span></div>
            <p>联系顺丰客服（95338），选择上门取件、到付，尽快寄出。</p>
          </div>
          <div class="adress-back">
            <h4>回寄地址</h4>
            <p>收件人：胡小凤</p>
            <p>电&nbsp;&nbsp;&nbsp;话：0755-36307304</p>
            <p>地&nbsp;&nbsp;&nbsp;址：深圳市盐田区北山道136号华大<span>二办311室</span></p>
          </div>
        </dd>
      </dl>
      <div class="commit-btn flex-box">
        <div :class="{activeY:isKnow===true}" @click="commit(true)">
          <div v-show="Ybtn" class="loading"></div>
          <img v-show="isKnow===true" src="../assets/img/sm-agree-active.png">
          <img v-show="isKnow===''||isKnow===false" src="../assets/img/sm-agree.png" alt="">
          <p>看懂了[{{isKnow===true?1:0}}]</p>
        </div>
        <div :class="{activeN:isKnow===false}" @click="commit(false)">
          <div v-show="Nbtn" class="loading"></div>
          <img v-show="isKnow===false"  src="../assets/img/sm-disagree-active.png" alt="">
          <img v-show="isKnow===''||isKnow===true"  src="../assets/img/sm-disagree.png" alt="">
          <p>没看懂[{{isKnow===false?1:0}}]</p>
        </div>
      </div>
    </div>
</template>

<script>
// @ is an alias to /src
export default {
  name: 'result',
  data() {
    return {
      isKnow: '',
      Ybtn: false,
      Nbtn: false
    }
  },
  components: {},
  computed: {},
  methods: {
    commit(val) {
      if (val === true) {
        this.Ybtn = true
        setTimeout(() => {
          this.Ybtn = false
          this.isKnow = val
          this.$layer.open({
            content: '我看懂了',
            skin: 'msg',
            time: 2
          })
        }, 1000)
      } else if (val === false) {
        this.Nbtn = true
        setTimeout(() => {
          this.Nbtn = false
          this.isKnow = val
          this.$layer.open({
            content: '我没看懂',
            skin: 'msg',
            time: 2
          })
        }, 1000)
      }
    }
  },
  mounted() {}
}
</script>
<style lang="scss" scoped>
.cy-shuoming {
  width: 100%;
  .banner {
    width: 100%;
    padding-bottom: 38%;
    background: url('../assets/img/sm-banner.png') center no-repeat;
    background-size: 100%;
    position: relative;
    .banner-box {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      p {
        font-size: r(20);
        color: #ffffff;
        margin-top: r(38);
      }
    }
  }
  dl {
    width: 92%;
    margin-left: 4%;
    display: block;
    text-align: left;
    margin-top: r(-48);
    position: relative;
    z-index: 2;
    dt {
      width: 100%;
      background: #66b9fe;
      padding-top: r(8);
      padding-bottom: r(8);
      padding-left: r(18);
      padding-right: r(18);
      box-sizing: border-box;
      border-top-left-radius: r(10);
      border-top-right-radius: r(10);
      overflow: hidden;
      justify-content: space-between;
      &.part-1 {
        height: r(48);
        overflow: hidden;
      }
      h3 {
        font-size: r(18);
        color: #fff;
        line-height: r(24);
        span {
          font-size: r(14);
        }
      }
      h4 {
        font-size: r(54);
        color: #84c7f1;
        line-height: r(54);
        margin-top: r(2);
      }
    }
    dd {
      background: #fff;
      padding: r(16);
      box-sizing: border-box;
      margin-bottom: r(20);
      border-bottom-left-radius: r(10);
      border-bottom-right-radius: r(10);
      box-shadow: 0 8px 16px rgba($color: #ebf3fc, $alpha: 1);
      &:last-child {
        margin-bottom: 0;
      }
      .step {
        width: 100%;
        overflow: hidden;
        margin-bottom: r(12);
        p {
          font-size: r(16);
          color: #999999;
          letter-spacing: 0;
          line-height: r(24);
          width: 90%;
          display: inline-block;
          span {
            display: inline-block;
            margin-bottom: r(8);
          }
          i {
            width: r(16);
            height: r(16);
            display: inline-block;
            border-radius: 100%;
            background: #bfc6cb;
            color: #fff;
            font-size: r(14);
            text-align: center;
            line-height: r(16);
            margin-right: r(4);
          }
        }
        .step-state {
          float: left;
          width: 10%;
          span {
            width: r(20);
            height: r(20);
            display: block;
            border-radius: 100%;
            background: #bfc6cb;
            color: #fff;
            font-size: r(14);
            text-align: center;
            line-height: r(20);
          }
        }
      }
      .step-last {
        margin-bottom: r(16);
      }
      .step-img {
        width: 100%;
        text-align: center;
        padding-top: r(16);
        padding-bottom: r(16);
        img {
          width: r(180);
        }
      }
      .adress-back {
        width: 100%;
        background: #f8f9fc;
        border-radius: r(10);
        overflow: hidden;
        padding-bottom: r(4);
        h4 {
          width: 100%;
          background: #66b9fe;
          color: #fff;
          font-size: r(16);
          padding: r(16);
          padding-top: r(12);
          padding-bottom: r(12);
          margin-bottom: r(12);
        }
        p {
          font-size: r(16);
          color: #999999;
          line-height: r(24);
          padding-left: r(16);
          padding-right: r(16);
          margin-bottom: r(8);
          span {
            display: inline-block;
            text-indent: r(58);
          }
        }
      }
    }
  }
  .commit-btn {
    width: 100%;
    height: r(128);
    img {
      width: r(48);
    }
    p {
      font-size: r(14);
      color: #999999;
      letter-spacing: 1px;
      line-height: r(25);
    }
    & > div {
      position: relative;
      &:first-child {
        margin-right: r(40);
      }
      &.activeY {
        p {
          color: #66b9fe;
        }
      }
      &.activeN {
        p {
          color: #ffad16;
        }
      }
    }
    .loading {
      width: r(48);
      height: r(48);
      background: rgba($color: #ffffff, $alpha: 0.7) url('../assets/img/loading.gif') center
        no-repeat;
      background-size: r(24);
      border-radius: 100%;
      position: absolute;
      top: 0;
      left: 50%;
      margin-left: r(-24);
    }
  }
}
</style>
